<script setup>
// import { ref,onMounted } from 'vue';
// import {getAqiDtrList} from '@/api/AqiDistribution';

// // 获取AQI数据
// const search = async () => {
//   const res = await getAqiDtrList();
//   if (res.code === 200) {
//     aqiData.value = res.data;
//   }
// };
// // 模拟的AQI数据
// const aqiData = ref([
//   // { level: 1, description: '优', count: 0 },
//   // { level: 2, description: '良', count: 2 },
//   // { level: 3, description: '轻度污染', count: 8 },
//   // { level: 4, description: '中度污染', count: 14 },
//   // { level: 5, description: '重度污染', count: 9 },
//   // { level: 6, description: '严重污染', count: 6 }
// ]);

// onMounted(() => {
//   search();
// });
import { ref, onMounted } from 'vue';
import { getAqiDtrList } from '@/api/AqiDistribution';


// 写死的AQI等级和描述数据
const fixedData = [
  { level: 1, description: '优' },
  { level: 2, description: '良' },
  { level: 3, description: '轻度污染' },
  { level: 4, description: '中度污染' },
  { level: 5, description: '重度污染' },
  { level: 6, description: '严重污染' }
];

// 获取AQI数据
const search = async () => {
  const res = await getAqiDtrList();
  if (res.code === 200 && Array.isArray(res.data)) {
    // 合并固定数据和API返回的数据
    aqiData.value = fixedData.map((item, index) => ({
      ...item,
      count: res.data[index] || 0 // 如果没有对应数据则默认为 0
    }));
  } else {
    console.error('获取AQI数据失败:', res.message);
    // 如果请求失败，也可以设置默认空数据或提示信息
    aqiData.value = fixedData.map(item => ({ ...item, count: 0 }));
  }
};

// 初始化AQI数据
const aqiData = ref(fixedData.map(item => ({ ...item, count: 0 })));

onMounted(() => {
  search();
});
</script>

<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>AQI空气质量指数级别分布</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- AQI空气质量指数级别分布卡片 -->
    <el-card class="aqi-card">
      <template #header>
        <div class="card-header">
          <span>AQI空气质量指数级别分布</span>
        </div>
      </template>
      <el-table :data="aqiData" style="width: 100%" height="450">
        <el-table-column prop="level" label="AQI指数等级" width="180"></el-table-column>
        <el-table-column prop="description" label="AQI指数等级描述" width="180"></el-table-column>
        <el-table-column prop="count" label="AQI指数等级分布统计"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.aqi-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
